<template>
	<view>
		<u-navbar title="选择音频话术" bgColor="transparent" leftIconColor="#fff" :titleStyle="{'color':'#fff'}" placeholder
			autoBack></u-navbar>
		<scroll-view scroll-y="true" style="height: 88vh;" @scrolltolower="ReachBottom">
			<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
				<view class="listBox" v-if="livelist.length>0">
					<view class="pd30 item dfx " v-for="(i,idx) in livelist">
						<view class="icon">
							<u-icon v-show="showPlay != i.id" name="play-right" size="25" @click="setplay(i)"></u-icon>
							<u-icon v-show="showPlay == i.id" name="pause" size="25" @click="setplay(i)"></u-icon>
						</view>
						<view class="info">
							<view class="title">
								{{i.title}}
							</view>
						</view>
						<view class="edit" @click.stop="handelClick(i)">
							<!-- 查看  -->
							<u-checkbox :customStyle="{marginBottom: '8px'}" label=" " :name="i.id">
							</u-checkbox>
						</view>
					</view>
				</view>
				<!-- 内容为空 -->
				<u-empty iconColor="#fff" textColor="#fff" marginTop="60" text="暂无音频话术" v-else mode="search"></u-empty>
			</u-checkbox-group>
		</scroll-view>
		<view class="btnBox">
			<view class="btn btn1 cfff" @click="saveChoose">
				{{title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				showPop: false,
				isPlay: -1,
				group_id: '',
				type: '',
				livelist: [],
				checkboxValue: [],
				activeInfo: {},
				bgAudio: null,
				showPlay: null,
				formInline: {
					page: 1,
					limit: 10,
					total: 0
				},
			};
		},
		onLoad(e) {
			if (e && e.group_id) {
				this.group_id = e.group_id
				this.insertInfo = JSON.parse(e.insertInfo)
				this.title = this.insertInfo.type == 'explain' ? '添加到商品讲解' : '添加到直播互动'
			}
			this.$tools.loadbgaudio()
		},
		onShow() {
			this.bgAudio = uni.createInnerAudioContext();
			this.$tools.loadbgaudio()
			this.bgAudio.onEnded(() => {
				this.showPlay = null
			});
			this.getData()
		},
		onHide() {
			this.bgAudio.destroy()
			this.showPlay = null
		},
		onUnload() {
			this.bgAudio.destroy()
			this.showPlay = null
		},
		// 监听用户下拉刷新
		onPullDownRefresh() {
			this.getData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.formInline.total > this.formInline.page) {
				this.formInline.page++
				this.getData();
			}
		},
		methods: {
			ReachBottom() {
				if (this.formInline.total > this.formInline.page) {
					this.formInline.page++
					this.getData();
				}
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			getData() {
				let params = {
					...this.formInline
				}
				params.group_id = this.group_id
				this.$api.audioList(params).then(res => {
					if (res.code == 200) {
						if (this.formInline.page == 1) {
							this.livelist = res.data.list
							console.log(this.livelist, res.data.list);
						} else {
							this.livelist = this.livelist.concat(res.data.list)
						}
						this.formInline.total = res.data.count
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},
			setplay(i) {
				if (!!this.showPlay) {
					this.showPlay = null
					this.bgAudio.pause()
				} else {
					console.log(111, i);
					this.showPlay = i.id
					this.bgAudio.src = i.url
					this.bgAudio.play()
				}
			},
			saveChoose() {
				let params = {
					audio_ids: this.checkboxValue
				}
				let api;
				if (this.insertInfo.type == 'explain') {
					params.explain_id = this.insertInfo.insertId
					console.log('params', params);
					api = this.$api.addExplainAudio(params)
				} else {
					params.interact_id = this.insertInfo.insertId
					console.log('params', params);
					api = this.$api.addInteractAudio(params)
				}
				api.then(res => {
					this.$tools.toast(res.msg);
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 500)
					}
				})

			}
		}
	}
</script>

<style lang="less">
	.listBox {
		margin: 30rpx 30rpx 10vh;
		overflow: hidden;
		font-size: 15px;

		.item {
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			justify-content: space-between;
			align-items: center;

			.icon {
				// width: 60rpx;
				// height: 60rpx;
				// border-radius: 50px;
				// background: #45516d;
				// color: #6468ff;
				// line-height: 60rpx;
				// text-align: center;
				// font-family: fantasy;
				// margin-right: 40rpx;
			}

			.info {
				line-height: 60rpx;
				font-weight: 600;
				width: 70%;

				.num {
					font-weight: 500;
				}
			}

		}


	}

	.btnBox {
		position: fixed;
		bottom: 0;
		width: 100vw;
		left: 0vw;
		background: #f7fbfe;
		z-index: 10;
		display: flex;
		justify-content: space-between;

		.btn {
			margin: 20rpx auto;
			width: 80vw;
			background: #f5f7fa;
			border-radius: 20rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
		}

		.btn1 {
			background-color: #6a8bff;
		}
	}
</style>